<template>
  <div class="hawkChart">
    <h3>{{chartTitle}}</h3>
    <div ref="columnChart" style="width:90%;height:400px;"></div>
  </div>
</template>

<script>
/**
* @author 罗冲
* @description 柱状图组件
* @api 后台接口地址
* @since 2021-11-09
* @update 代码更新时间
* @modifier 修改人
* @bug 无
* @version 版本号 例:v1.0.0
*/
import * as echarts from "echarts";
export default {
  data () {
    return {
    };
  },
  props:{
    chartTitle:{
      type:String,
      default:''
    },
    chartData:{
      type:Object,
      default:()=>{
        return {
          x:[],
          y:[]
        }
      }
    },
    unit:{
      type:String,
      default:''
    }
  },
  watch:{
    chartData:function(val){
      console.log(val);
      this.chart();
    }
  },
  methods: {
    chart(){
      let this_ = this;
      var columnChart = this.$refs.columnChart;
      var myChart = echarts.init(columnChart);
      myChart.setOption({
        tooltip: {
          formatter: function(params) {
            return this_.chartTitle + '：' +params.value + this_.unit;
          }
        },
        xAxis: {
          type: 'category',
          data:this.chartData.x
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.chartData.y,
            barWidth:40,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,   // 前两位代表上下，后两位代表左右
                  [
                      {offset: 1, color: 'red'},  
                      {offset: 0, color: '#000000'}
                  ]
                )
              }
            },
            type: 'bar'
          }
        ]
      })
    }
  },
  mounted(){
    this.chart();
  }
}
</script>

<style lang='scss' scoped>
.hawkChart{
  padding-top:20px;
  h3{
    width: 90%;
    margin:0 auto;
  }
}
</style>